<template>
  <el-dialog
    title="基本信息"
    :visible.sync="dialogVisible"
    width="50%"
    :before-close="handleClose"
    @close="close"
  >
    <my-form
      :ref-obj.sync="addAccountForm.ref"
      :form-opts="addAccountForm"
      :width-size="1"
      @handleEvent="handleAddAccountEvent"
    >
      <el-radio-group slot="spouse" v-model="addAccountForm.formData.spouse">
        <el-radio :label="0">关</el-radio>
        <el-radio :label="1">开</el-radio>
      </el-radio-group>
      <el-radio-group slot="role" v-model="addAccountForm.formData.role">
        <template v-for="(item, index) in addAccountForm.listTypeInfo.roleList">
          <el-radio
            v-if="item.label != '超级管理员'"
            :key="index"
            :label="item.label"
            @change="roleChange"
          >{{ item.label }}</el-radio>
        </template>
      </el-radio-group>
      <div slot="role_classify">
        <!-- v-if="addAccountForm.formData.role === '学院' || addAccountForm.formData.role === '人才'" -->

        <el-select
          v-model="addAccountForm.formData.role_classify"
          placeholder="请选择"
        >
          <el-option
            v-for="(item, index) in addAccountForm.listTypeInfo.schoolList"
            :key="index"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </div>
      <div slot="group_id">
        <!-- v-if="addAccountForm.formData.role === '学院' || addAccountForm.formData.role === '人才'" -->

        <el-select
          v-model="addAccountForm.formData.group_id"
          placeholder="请选择"
        >
          <el-option
            v-for="(item, index) in addAccountForm.listTypeInfo.permissionsList"
            :key="index"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </div>
    </my-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import config from './config'
import { addAccount, getAccountDetail } from '@/api/account'
import { getRoleMold,getPermissions } from '@/api/personnel'
export default {
  data () {
    return {
      dialogVisible: false,
      addAccountForm: JSON.parse(JSON.stringify(config.addAccountForm))
    }
  },
  watch: {
    dialogVisible (newVal) {
      this.addAccountForm.rules = config.addAccountForm.rules
      // 打开时初始化表单
      if (newVal) {
        this.addAccountForm.ref?.resetFields()
        this.addAccountForm.ref?.clearValidate()
        this.addAccountForm.fieldList = JSON.parse(JSON.stringify(config.addAccountForm.fieldList))
        this.addAccountForm.formData = JSON.parse(JSON.stringify(config.addAccountForm.formData))
      } else {
        this.addAccountForm.fieldList[1].disabled = false
        this.addAccountForm.fieldList[1].type = 'input'
        this.addAccountForm.fieldList = JSON.parse(JSON.stringify(config.addAccountForm.fieldList))
        this.addAccountForm.formData = JSON.parse(JSON.stringify(config.addAccountForm.formData))
        console.log(config.addAccountForm)
        console.log(this.addAccountForm.formData)
      }
    }
  },
  created () {
    this.getRoleMold()
    this.getPermissions()
  },
  methods: {
    open (data = {}) {
      console.log(data)
      this.dialogVisible = true
      if (Object.keys(data).length > 0) {
        this.addAccountForm.fieldList[1].disabled = true
        this.addAccountForm.fieldList[1].type = 'password'
        this.getAccountDetail({
          id: data.id,
          username: data.username,
          nickname: data.nickname
        })
      }
    },
    handleAddAccountEvent (type, val) {
      // console.log(type, val)
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    // 角色单选框改变时触发
    roleChange (e) {
      const role = this.addAccountForm.formData.role
      switch (role) {
        case '人才':
          this.addAccountForm.fieldList = config.fieldList1
          break
        case '学院':
          this.addAccountForm.fieldList = config.fieldList2
          break
        case '专家':
          this.addAccountForm.fieldList = config.fieldList3
          break
          case '管理员':
          this.addAccountForm.fieldList = config.fieldList4
          break
          case '评委':
          this.addAccountForm.fieldList = config.fieldList5
          break
        default:
          this.addAccountForm.fieldList = config.fieldList
          break
      }
    },
    close () {
      // console.log(123)
      this.addAccountForm.fieldList = JSON.parse(JSON.stringify(config.addAccountForm.fieldList))
      this.addAccountForm.formData = JSON.parse(JSON.stringify(config.addAccountForm.formData))
    },
    // 添加账号
    async addAccount (data) {
      await addAccount(data)
      this.addAccountForm.ref.resetFields()
      this.dialogVisible = false
      this.$message.success('添加成功')
      this.$emit('success')
    },
    // 获取学院列表
    async getRoleMold () {
      const res = await getRoleMold()
      this.addAccountForm.listTypeInfo.schoolList = res.data
    },
    // 获取权限列表
    async getPermissions () {
      const res = await getPermissions()
      this.addAccountForm.listTypeInfo.permissionsList = res.data
      console.log("获取权限列表",this.addAccountForm.listTypeInfo.permissionsList);
    },
    // 获取账号详情
    async getAccountDetail (data) {
      const res = await getAccountDetail(data)
      console.log(res.data)
      this.addAccountForm.formData = res.data
      // 设置时间格式
      this.addAccountForm.formData.valid = new Date(
        this.addAccountForm.formData.valid * 1000
      )
      const role = res.data.role
      switch (role) {
        case '人才':
          this.addAccountForm.fieldList = config.fieldList1
          break
        case '学院':
          this.addAccountForm.fieldList = config.fieldList2
          break
        case '专家':
          this.addAccountForm.fieldList = config.fieldList3
          break
          case '管理员':
          this.addAccountForm.fieldList = config.fieldList4
          break
        case '评委':
          this.addAccountForm.fieldList = config.fieldList5
          break
        default:
          this.addAccountForm.fieldList = config.fieldList
          break
      }
    },
    // 提交form表单
    submitForm () {
      console.log(this.addAccountForm.formData)
      this.addAccountForm.ref.validate((valid1) => {
        if (!valid1) return
        this.addAccountForm.fieldList = JSON.parse(JSON.stringify(config.addAccountForm.fieldList))
        let valid = this.addAccountForm.formData.valid
        valid =
          new Date(valid).getTime() / 1000
        const {
          username,
          id,
          nickname,
          email,
          mobile,
          spouse,
          role,
          role_classify,
          year_salary,
          settle_down,
          startup,
          learning,
          company,
          group_id,
          real_name
        } = this.addAccountForm.formData
        if (this.addAccountForm.formData.id) {
          const data = {
            username,
            id,
            nickname,
            email,
            mobile,
            spouse,
            role_classify,
            role,
            valid,
            year_salary,
            settle_down,
            startup,
            learning,
            company,
            group_id,
            real_name
          }
          this.getAccountDetail(data)
          // this.$message.success('修改成功')
          this.dialogVisible = false
          this.$emit('success')
        } else {
          const data = JSON.parse(JSON.stringify(this.addAccountForm.formData))
          data.valid = valid
          this.addAccount(data)
        }

        // console.log('最终数据', this.addAccountForm.formData)
      })
    }
  }
}
</script>
<style lang="scss" scoped></style>
